/**
 * 监控组件
 */
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { message } from 'antd';
import imgs from './image';

export default class extends React.Component {
  componentDidMount = () => {};
  getIconItem = (params = {}) => {
    var style = {};
    if (params.end) style.margin = 0;
    return (
      <div className={styles.iconItem} style={style}>
        <img src={params.icon} />
        <div className={styles.text}>{params.text}</div>
      </div>
    );
  };

  getIconItem2 = (params = {}) => {
    var style = {};
    if (params.end) style.margin = 0;
    return (
      <div className={styles.iconItem2} style={style}>
        <img src={params.icon} />
        <div className={styles.text}>
          <div className={styles.textChild}>{params.text}</div>
        </div>
      </div>
    );
  };

  render() {
    return (
      <div className={styles.root}>
        <div className={styles.iconRoot}>
          <div className={styles.row}>
            <div className={styles.title}>数据应用</div>
            <div className={styles.icons}>
              {this.getIconItem({
                icon: imgs.BigScreen,
                text: '大屏',
              })}

              {this.getIconItem({
                icon: imgs.Cockpit,
                text: '驾驶舱',
              })}

              {this.getIconItem({
                icon: imgs.Warn,
                text: '告警',
              })}

              {this.getIconItem({
                icon: imgs.Daily,
                text: '日报',
              })}

              {this.getIconItem({
                icon: imgs.Monthly,
                text: '月报',
              })}

              {this.getIconItem({
                icon: imgs.SmartReport,
                text: '智能报表',
                end: true,
              })}

              <div className={styles.arrow}>
                <img src={imgs.Arrow} />
              </div>
            </div>
          </div>

          <div className={styles.row}>
            <div className={styles.title}>监控组件</div>
            <div className={styles.icons}>
              {this.getIconItem2({
                icon: imgs.AppCache,
                text: '应用缓存',
              })}

              {this.getIconItem2({
                icon: imgs.AppDatabase,
                text: '应用数据库',
              })}

              {this.getIconItem2({
                icon: imgs.BigDataBase,
                text: '大数据数据库',
                end: true,
              })}

              <div className={styles.arrow}>
                <img src={imgs.Arrow} />
              </div>
            </div>
          </div>

          <div className={styles.row}>
            <div className={styles.title}>监控组件</div>
            <div className={styles.icons}>
              {this.getIconItem2({
                icon: imgs.SisCallIinterface,
                text: 'SIS调用接口',
              })}

              {this.getIconItem2({
                icon: imgs.ColumnarDatabase,
                text: '大数据列式数据库',
              })}

              {this.getIconItem2({
                icon: imgs.BigDataBase,
                text: '应用数据库',
                end: true,
              })}

              <div className={styles.arrow}>
                <img src={imgs.Arrow} />
              </div>
            </div>
          </div>

          <div className={styles.row} style={{position:'relative',left:'10px'}}>
            <div className={styles.title}>数据源</div>
            <div className={styles.icons}>
              {this.getIconItem({
                icon: imgs.SIS,
                text: 'SIS',
              })}

              {this.getIconItem({
                icon: imgs.NC,
                text: 'NC',
              })}

              {this.getIconItem({
                icon: imgs.MIS,
                text: 'MIS',
              })}

              {this.getIconItem({
                icon: imgs.Weighbridge,
                text: '地磅',
              })}

              {this.getIconItem({
                icon: imgs.Pat,
                text: '随手拍',
              })}

              {this.getIconItem({
                icon: imgs.Dingding,
                text: '钉钉录入',
              })}

              {this.getIconItem({
                icon: imgs.ImportManually,
                text: '手动录入',
                end: true,
              })}
            </div>
          </div>
        </div>
      </div>
    );
  }
}
